<template>
  <div class="outline-wrap">
    <el-popover
      ref="popover"
      v-model:visible="popoverVisible"
      :virtual-ref="triggerRef"
      placement="top"
      trigger="manual"
      virtual-triggering
      width="200"
    >
      <span>{{ popoverContent }}</span>
    </el-popover>
    <div
      v-if="drawingList && drawingList.length"
      class="outline-content"
    >
      <el-scrollbar height="800px">
        <draggable
          :list="drawingList"
          class="list-group"
          handle=".handle"
          item-key="formId"
          tag="div"
        >
          <template #item="{ element, index }">
            <div
              class="fa item"
              @click="handleItemClick(element.vModel)"
              @mouseenter="showPopover($event, element.config.label)"
              @mouseleave="hidePopover"
            >
              <el-icon class="el-icon handle mr10">
                <TablerGripVertical />
              </el-icon>
              {{ index + 1 }}.
              {{ removeHtmlTag(element.config.label) }}
            </div>
          </template>
        </draggable>
      </el-scrollbar>
    </div>
    <el-empty v-else />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import draggable from "vuedraggable";
import { removeHtmlTag } from "../../../utils";
import TablerGripVertical from "~icons/tabler/grip-vertical";
import { formDesign } from "@/views/formgen/components/FormDesign/hooks/useFormDesign";

defineProps({
  formKey: {
    type: String,
    default: ""
  }
});

const { drawingList } = formDesign;

const emit = defineEmits(["refreshFormList", "scrollToField"]);

const popoverVisible = ref(false);
const popoverContent = ref("");
const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
} as DOMRect);

const triggerRef = ref({
  getBoundingClientRect: () => position.value
});

const handleItemClick = (formId: string) => {
  console.log(formId);
  emit("scrollToField", formId);
};

const showPopover = (event: MouseEvent, label: string) => {
  const target = event.currentTarget as HTMLElement;
  const containerWidth = target.offsetWidth;

  if (target.scrollWidth > containerWidth) {
    popoverContent.value = removeHtmlTag(label);
    popoverVisible.value = true;
    const rect = target.getBoundingClientRect();
    position.value = DOMRect.fromRect({
      x: rect.left,
      y: rect.top,
      width: rect.width,
      height: rect.height
    });
  }
};

const hidePopover = () => {
  popoverVisible.value = false;
};

onMounted(() => {
  document.addEventListener("mousemove", mousemoveHandler);
});

onUnmounted(() => {
  document.removeEventListener("mousemove", mousemoveHandler);
});

const mousemoveHandler = ({ clientX, clientY }: MouseEvent) => {
  position.value = DOMRect.fromRect({
    x: clientX,
    y: clientY
  });
};
</script>
<style lang="scss" scoped>
.outline-wrap {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  user-select: none;

  .outline-content {
    margin-top: 5px;
  }

  .btn-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
    border-bottom: var(--el-border);
  }

  .item {
    margin-bottom: 5px;
    padding: 0 4px;
    box-sizing: border-box;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    color: var(--el-text-color-regular);
    transition: all 0.3s;
    display: flex;
    align-items: center;

    .i-icon {
      vertical-align: middle;
      display: flex;
      margin-right: 12px;
    }

    &:hover {
      background-color: var(--el-bg-color-page);
      cursor: pointer;
    }
  }
}
</style>
